<template>
  <div class="headle">
    <div>
      <van-icon name="arrow-left" @click="leftClick" />
      <span class="right" @click="routerClcik">发布</span>
    </div>
    <div class="flag">
      <van-uploader :after-read="afterRead" class="top" v-model="fileList" />
      <ul>
        <li>
          <input
            type="text"
            placeholder="填写标题让更多人可以看到~"
            v-model="value"
          />
        </li>
        <li>
          <input
            type="text"
            placeholder="填写正文（内容越丰富可能点赞越多哦~）"
            v-model="msg"
          />
        </li>
      </ul>
      <p><van-icon name="comment-o" color="green" />我的食愈力清单</p>
    </div>
    <div class="main">
      <p>
        <van-icon name="bag-o" /> 添加商品({{ count }}/10)
        <router-link to="/clubs/search"
          ><span>添加商品可能获得赞越多哦~ ></span></router-link
        >
      </p>

      <ul v-if="list.length" class="secth">
        <li v-for="item in list" :key="item.title">
          <img :src="item.img" alt="" class="img2" />
          <span>{{ item.title }}</span>
          <b @click="delClick(item.id)">X</b>
        </li>
      </ul>
      <div v-else>
        <img
          class="img1"
          src="https://img1.baidu.com/it/u=2031937306,4187359744&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
          alt=""
        />
        <p class="img">暂未添加商品, 快去添加吧~</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Uploader } from "vant";
export default {
  data() {
    return {
      list: this.$store.state.listhot,
      fileList: [
        {
          url: "https://img.yzcdn.cn/vant/leaf.jpg",
        },
      ],
      value: "",
      msg: "",
      routerList: [],
    };
  },
  activated() {
    // this.list = this.$store.state.listhot;
    // console.log(this.$store.state.listhot);
    // console.log( this.list);
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    delClick(id) {
      this.list = this.list.filter((item) => item.id !== id);
      this.$store.commit("SET_JUMPCLICK", this.data);
    },
    leftClick() {
      this.$router.push("details");
      this.$store.state.id
    },
    routerClcik() {
        this.routerList.push({
          list: this.list,
          fileList: this.fileList,
          value:this.value,
          msg: this.msg,
        })
      this.$store.commit("SET_ROUTERLIST", this.routerList);
      this.routerList=""
      this.$router.push("details");
    },
  },
  computed: {
    count() {
      return this.list.length;
    },
  },
};
</script>

<style scoped lang="scss">
.headle {
  background: #ececec;
  div {
    padding-top: 10px;
    background: #fff;
    .van-icon {
      font-size: 24px;
      color: #ccc;
    }
    .right {
      width: 80px;
      height: 30px;
      background: green;
      color: #fff;
      text-align: center;
      border-radius: 20px;
      line-height: 30px;
      float: right;
      margin-right: 10px;
    }
  }
}
.flag {
  height: 280px;
  background: #fff;
  p {
    margin: 20px;
    border-radius: 5px;
    background: rgba($color: rgba(75, 128, 0, 0.87), $alpha: 0.3);
    color: green;
    padding: 3px;
    .van-icon {
      color: green;
    }
  }
}
.top {
  margin: 10px;
  color: #ccc;
}
li {
  border-bottom: 1px solid #ececec;
  padding: 10px 10px;
  margin: 10px 0px;
  input {
    width: 500px;
    border: none;
    font-size: 16px;
  }
}
p {
  margin-top: 10px;
  background: #fff;
}
.main {
  margin-top: 10px;
  height: 300px;
  background: #fff;
  overflow: hidden;
  .img1 {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    text-align: center;
    margin-left: 130px;
    margin-top: 80px;
  }
  p {
    margin-top: 10px;
    .van-icon {
      font-size: 18px;
    }
    font-size: 16px;
    span {
      font-size: 14px;
      color: #ccc;
      float: right;
      margin-right: 5px;
    }
  }
  .img {
    color: #333;
    text-align: center;
  }
  .secth {
    li {
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ccc;
      .img2 {
        // margin: 0 10px;
        width: 50px;
        height: 50px;
      }
      b {
        color: #ccc;
      }
    }
  }
}
</style>